<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>区块链商品管理系统</title>
    <!-- 引入 Bootstrap 5 CSS -->
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css">
    <!-- 引入 Font Awesome 图标 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <!-- 引入 Vue 3 -->
    <script src="https://cdn.jsdelivr.net/npm/vue@3.2.47/dist/vue.global.min.js"></script>
    <!-- 引入 Axios -->
    <script src="https://cdn.jsdelivr.net/npm/axios/dist/axios.min.js"></script>
    <!-- 自定义样式 -->
    <style>
        :root {
            --primary-color: #3498db;
            --primary-dark: #2980b9;
            --secondary-color: #2ecc71;
            --secondary-dark: #27ae60;
            --danger-color: #e74c3c;
            --warning-color: #f39c12;
            --dark-color: #2c3e50;
            --light-color: #ecf0f1;
        }
        
        body {
            background-color: #f8f9fa;
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            color: var(--dark-color);
        }
        
        .navbar-brand {
            font-weight: 700;
            letter-spacing: 1px;
        }
        
        .hero-section {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            padding: 2rem 0;
            border-radius: 0.5rem;
            margin-bottom: 2rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
        }
        
        .hero-title {
            font-weight: 700;
            font-size: 2.5rem;
            margin-bottom: 0.5rem;
        }
        
        .hero-subtitle {
            font-weight: 300;
            opacity: 0.9;
            margin-bottom: 1rem;
        }
        
        .hero-stats {
            background-color: rgba(255, 255, 255, 0.2);
            border-radius: 0.5rem;
            padding: 1rem;
            text-align: center;
            backdrop-filter: blur(10px);
        }
        
        .hero-stats-value {
            font-size: 1.8rem;
            font-weight: 700;
        }
        
        .hero-stats-label {
            font-size: 0.9rem;
            opacity: 0.8;
        }
        
        .card {
            border: none;
            border-radius: 0.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            transition: transform 0.3s ease, box-shadow 0.3s ease;
            overflow: hidden;
            margin-bottom: 1.5rem;
        }
        
        .card:hover {
            transform: translateY(-5px);
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1);
        }
        
        .card-header {
            border-bottom: none;
            padding: 1.25rem;
            font-weight: 600;
        }
        
        .card-header.bg-primary {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark)) !important;
        }
        
        .card-header.bg-success {
            background: linear-gradient(135deg, var(--secondary-color), var(--secondary-dark)) !important;
        }
        
        .form-control, .btn {
            border-radius: 0.5rem;
            padding: 0.75rem 1rem;
        }
        
        .form-control:focus {
            box-shadow: 0 0 0 0.25rem rgba(52, 152, 219, 0.25);
            border-color: var(--primary-color);
        }
        
        .btn {
            font-weight: 600;
            letter-spacing: 0.5px;
            transition: all 0.3s ease;
        }
        
        .btn-primary {
            background-color: var(--primary-color);
            border-color: var(--primary-color);
        }
        
        .btn-primary:hover {
            background-color: var(--primary-dark);
            border-color: var(--primary-dark);
        }
        
        .btn-success {
            background-color: var(--secondary-color);
            border-color: var(--secondary-color);
        }
        
        .btn-success:hover {
            background-color: var(--secondary-dark);
            border-color: var(--secondary-dark);
        }
        
        .btn-danger {
            background-color: var(--danger-color);
            border-color: var(--danger-color);
        }
        
        .table {
            background-color: white;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        
        .table th {
            font-weight: 600;
            color: var(--dark-color);
            border-top: none;
            border-bottom: 2px solid var(--light-color);
        }
        
        .goods-table tr {
            transition: background-color 0.2s ease;
        }
        
        .goods-table tr:hover {
            background-color: rgba(52, 152, 219, 0.05);
        }
        
        .modal-content {
            border: none;
            border-radius: 0.5rem;
            overflow: hidden;
        }
        
        .modal-header {
            background: linear-gradient(135deg, var(--primary-color), var(--primary-dark));
            color: white;
            border-bottom: none;
        }
        
        .transaction-item {
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 0.5rem;
        }
        
        .transaction-label {
            font-weight: 600;
            color: var(--dark-color);
        }
        
        .text-break {
            word-break: break-all;
            font-family: monospace;
            background-color: #f1f1f1;
            padding: 0.5rem;
            border-radius: 0.25rem;
            font-size: 0.9rem;
        }
        
        .loading-overlay {
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background-color: rgba(255, 255, 255, 0.7);
            display: flex;
            align-items: center;
            justify-content: center;
            z-index: 100;
            backdrop-filter: blur(5px);
            border-radius: 0.5rem;
        }
        
        .blockchain-icon {
            position: relative;
            display: inline-block;
            font-size: 1.2rem;
            margin-right: 0.5rem;
            color: var(--primary-color);
            animation: pulse 2s infinite;
        }
        
        @keyframes pulse {
            0% {
                transform: scale(1);
            }
            50% {
                transform: scale(1.1);
            }
            100% {
                transform: scale(1);
            }
        }
        
        .footer {
            background-color: var(--dark-color);
            color: white;
            padding: 2rem 0;
            margin-top: 3rem;
        }
        
        .price-tag {
            background-color: var(--secondary-color);
            color: white;
            padding: 0.25rem 0.5rem;
            border-radius: 0.25rem;
            font-weight: 600;
        }
        
        /* 查询区域样式 */
        .search-card {
            background-color: #f8f9fa;
            border-radius: 0.5rem;
            padding: 1rem;
            margin-bottom: 1.5rem;
        }
        
        .search-result {
            background-color: white;
            border-radius: 0.5rem;
            padding: 1.5rem;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
            margin-top: 1rem;
        }
        
        .search-empty {
            text-align: center;
            padding: 2rem;
            color: #6c757d;
        }
        
        /* 自适应样式 */
        @media (max-width: 768px) {
            .hero-title {
                font-size: 2rem;
            }
            
            .hero-stats-value {
                font-size: 1.5rem;
            }
        }
    </style>
</head>
<body>
    <div id="app">
        <!-- 顶部导航栏 -->
        <nav class="navbar navbar-expand-lg navbar-dark bg-dark mb-4">
            <div class="container">
                <a class="navbar-brand" href="#">
                    <i class="fas fa-cubes blockchain-icon"></i> 
                    区块链商品管理系统
                </a>
            </div>
        </nav>
        
        <div class="container">
            <!-- 头部统计区域 -->
            <div class="hero-section">
                <div class="container">
                    <div class="row align-items-center">
                        <div class="col-md-8">
                            <h1 class="hero-title">区块链商品管理平台</h1>
                            <p class="hero-subtitle">基于FISCO BCOS区块链技术构建的去中心化商品管理系统</p>
                        </div>
                        <div class="col-md-4">
                            <div class="hero-stats">
                                <div class="hero-stats-value">{{ goodsList.length }}</div>
                                <div class="hero-stats-label">商品总数</div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="row">
                <!-- 左侧表单区域 -->
                <div class="col-lg-4 mb-4">
                    <!-- 商品表单 -->
                    <div class="card">
                        <div class="card-header bg-primary text-white">
                            <i class="fas" :class="editMode ? 'fa-edit' : 'fa-plus-circle'"></i>
                            {{ editMode ? '修改商品' : '添加新商品' }}
                        </div>
                        <div class="card-body">
                            <form @submit.prevent="editMode ? updateGoods() : createGoods()">
                                <div class="mb-3">
                                    <label for="goodsId" class="form-label">商品ID</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                        <input type="number" class="form-control" id="goodsId" v-model="form.id" :disabled="editMode" required>
                                    </div>
                                    <small class="text-muted">唯一标识符，区块链上的ID</small>
                                </div>
                                <div class="mb-3">
                                    <label for="goodsName" class="form-label">商品名称</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-tag"></i></span>
                                        <input type="text" class="form-control" id="goodsName" v-model="form.name" required>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="goodsDescription" class="form-label">商品描述</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-align-left"></i></span>
                                        <textarea class="form-control" id="goodsDescription" v-model="form.description" rows="3" required></textarea>
                                    </div>
                                </div>
                                <div class="mb-3">
                                    <label for="goodsPrice" class="form-label">商品价格</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-yen-sign"></i></span>
                                        <input type="number" class="form-control" id="goodsPrice" v-model="form.price" min="1" required>
                                    </div>
                                </div>
                                <div class="d-flex justify-content-between mt-4">
                                    <button type="submit" class="btn btn-primary">
                                        <i class="fas" :class="editMode ? 'fa-save' : 'fa-plus-circle'"></i>
                                        {{ editMode ? '更新商品' : '创建商品' }}
                                    </button>
                                    <button type="button" class="btn btn-secondary" v-if="editMode" @click="cancelEdit">
                                        <i class="fas fa-times"></i> 取消
                                    </button>
                                </div>
                            </form>
                        </div>
                    </div>
                    
                    <!-- 查询商品表单 -->
                    <div class="card">
                        <div class="card-header bg-info text-white">
                            <i class="fas fa-search"></i> 查询商品
                        </div>
                        <div class="card-body">
                            <form @submit.prevent="queryGoods">
                                <div class="mb-3">
                                    <label for="queryId" class="form-label">商品ID</label>
                                    <div class="input-group">
                                        <span class="input-group-text"><i class="fas fa-hashtag"></i></span>
                                        <input type="number" class="form-control" id="queryId" v-model="queryForm.id" required>
                                        <button type="submit" class="btn btn-info">
                                            <i class="fas fa-search"></i> 查询
                                        </button>
                                    </div>
                                    <small class="text-muted">输入要查询的商品ID，直接从区块链读取数据</small>
                                </div>
                            </form>
                            
                            <!-- 查询结果显示 -->
                            <div v-if="queryResult" class="search-result">
                                <h5 class="mb-3"><i class="fas fa-info-circle"></i> 查询结果</h5>
                                
                                <!-- 加载状态 -->
                                <div v-if="loading" class="text-center p-3">
                                    <div class="spinner-border text-info" role="status">
                                        <span class="visually-hidden">加载中...</span>
                                    </div>
                                    <p class="mt-2">正在从区块链读取数据...</p>
                                </div>
                                
                                <!-- 查询成功 -->
                                <div v-else-if="queryResult.contractData" class="mb-3">
                                    <div class="mb-2"><strong>商品ID:</strong> {{ queryResult.id }}</div>
                                    <div class="mb-2"><strong>商品名称:</strong> {{ queryResult.contractData.name }}</div>
                                    <div class="mb-2"><strong>商品描述:</strong> {{ queryResult.contractData.description }}</div>
                                    <div><strong>商品价格:</strong> <span class="price-tag">￥{{ queryResult.contractData.price }}</span></div>
                                    <div class="mt-3">
                                        <button class="btn btn-sm btn-outline-primary" @click="loadProductToForm(queryResult)">
                                            <i class="fas fa-edit"></i> 编辑此商品
                                        </button>
                                    </div>
                                </div>
                                
                                <!-- 查询失败 -->
                                <div v-else class="search-empty">
                                    <i class="fas fa-exclamation-circle fa-2x mb-2"></i>
                                    <p>未找到该商品或商品数据格式不正确</p>
                                    <p v-if="queryResult.error" class="text-danger small">
                                        <strong>错误信息:</strong> {{ queryResult.error }}
                                    </p>
                                    
                                    <!-- 区块链连接检查按钮 -->
                                    <div class="mt-3">
                                        <button class="btn btn-sm btn-outline-secondary" @click="checkBlockchainConnection">
                                            <i class="fas fa-network-wired"></i> 检查区块链连接
                                        </button>
                                    </div>
                                    
                                    <!-- 调试信息 -->
                                    <div v-if="queryResult.rawData" class="mt-3">
                                        <p class="text-muted small mb-1">原始返回数据 (调试用):</p>
                                        <pre class="bg-light p-2 small">{{ JSON.stringify(queryResult.rawData, null, 2) }}</pre>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                
                <!-- 右侧商品列表 -->
                <div class="col-lg-8">
                    <div class="container mt-5">
                        <div class="row">
                            <div class="col-12">
                                <div class="card shadow">
                                    <div class="card-header bg-primary bg-gradient text-white d-flex justify-content-between align-items-center">
                                        <h5 class="mb-0"><i class="fas fa-list me-2"></i>商品列表 (总共: {{ goodsList.length }})</h5>
                                    </div>
                                    <div class="card-body p-0">
                                        <div class="table-responsive">
                                            <table class="table table-striped table-hover goods-table mb-0">
                                                <thead class="table-light">
                                                    <tr>
                                                        <th>ID</th>
                                                        <th>名称</th>
                                                        <th>描述</th>
                                                        <th>价格</th>
                                                        <th>操作</th>
                                                    </tr>
                                                </thead>
                                                <tbody>
                                                    <tr v-if="loading">
                                                        <td colspan="5" class="text-center py-4">
                                                            <div class="spinner-border text-primary" role="status">
                                                                <span class="visually-hidden">加载中...</span>
                                                            </div>
                                                            <p class="mt-2 mb-0">加载商品数据...</p>
                                                        </td>
                                                    </tr>
                                                    <tr v-else-if="paginatedGoodsList.length === 0">
                                                        <td colspan="5" class="text-center py-4">
                                                            <i class="fas fa-box-open fa-3x text-muted mb-3"></i>
                                                            <p class="mb-0">暂无商品数据</p>
                                                        </td>
                                                    </tr>
                                                    <tr v-for="good in paginatedGoodsList" :key="good.id">
                                                        <td>{{ good.id }}</td>
                                                        <td>{{ good.name }}</td>
                                                        <td>{{ good.description }}</td>
                                                        <td>{{ good.price }}</td>
                                                        <td>
                                                            <button class="btn btn-sm btn-outline-primary me-1" @click="prepareUpdateGoods(good)">
                                                                <i class="fas fa-edit"></i>
                                                            </button>
                                                            <button class="btn btn-sm btn-outline-danger" @click="deleteGoods(good.id)">
                                                                <i class="fas fa-trash"></i>
                                                            </button>
                                                        </td>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </div>
                                    </div>
                                    <div class="card-footer bg-light">
                                        <!-- 分页组件 -->
                                        <nav aria-label="商品列表分页" v-if="totalPages > 1">
                                            <ul class="pagination justify-content-center mb-0">
                                                <!-- 上一页按钮 -->
                                                <li class="page-item" :class="{ 'disabled': pagination.currentPage === 1 }">
                                                    <a class="page-link" href="#" @click.prevent="changePage(pagination.currentPage - 1)">
                                                        <i class="fas fa-chevron-left"></i>
                                                    </a>
                                                </li>
                                                
                                                <!-- 页码按钮 -->
                                                <li v-for="page in pageNumbers" :key="page" class="page-item" :class="{ 'active': pagination.currentPage === page }">
                                                    <a class="page-link" href="#" @click.prevent="changePage(page)">{{ page }}</a>
                                                </li>
                                                
                                                <!-- 下一页按钮 -->
                                                <li class="page-item" :class="{ 'disabled': pagination.currentPage === totalPages }">
                                                    <a class="page-link" href="#" @click.prevent="changePage(pagination.currentPage + 1)">
                                                        <i class="fas fa-chevron-right"></i>
                                                    </a>
                                                </li>
                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        
        <!-- 页脚 -->
        <footer class="footer mt-5">
            <div class="container">
                <div class="row">
                    <div class="col-md-6">
                        <h5>区块链商品管理系统</h5>
                        <p class="mb-0">基于FISCO BCOS区块链技术开发</p>
                        <p class="small opacity-75">安全、透明、不可篡改的商品管理解决方案</p>
                    </div>
                    <div class="col-md-6 text-md-end">
                        <p>© 2025 区块链商品管理系统</p>
                    </div>
                </div>
            </div>
        </footer>
        
        <!-- 交易记录弹窗 -->
        <div class="modal fade" id="transactionModal" tabindex="-1" aria-hidden="true">
            <div class="modal-dialog modal-lg">
                <div class="modal-content">
                    <div class="modal-header">
                        <h5 class="modal-title">
                            <i class="fas fa-exchange-alt me-2"></i>
                            区块链交易详情
                        </h5>
                        <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                    </div>
                    <div class="modal-body">
                        <div class="transaction-item mb-3">
                            <div class="transaction-label mb-1">
                                <i class="fas fa-fingerprint me-1"></i> 交易哈希:
                            </div>
                            <p class="text-break mb-0">{{ transactionInfo.transactionHash }}</p>
                        </div>
                        
                        <div class="transaction-item mb-3">
                            <div class="transaction-label mb-1">
                                <i class="fas fa-cube me-1"></i> 区块号:
                            </div>
                            <p class="mb-0">{{ transactionInfo.blockNumber }}</p>
                        </div>
                        
                        <div class="transaction-item mb-3">
                            <div class="transaction-label mb-1">
                                <i class="fas fa-info-circle me-1"></i> 状态:
                            </div>
                            <p class="mb-0">
                                <span :class="transactionInfo.status === '0x0' ? 'badge bg-success' : 'badge bg-danger'">
                                    {{ transactionInfo.status === '0x0' ? '成功' : '失败' }}
                                </span>
                            </p>
                        </div>
                        
                        <div class="transaction-item mb-3">
                            <div class="transaction-label mb-1">
                                <i class="fas fa-paper-plane me-1"></i> 发送方:
                            </div>
                            <p class="text-break mb-0">{{ transactionInfo.from }}</p>
                        </div>
                        
                        <div class="transaction-item">
                            <div class="transaction-label mb-1">
                                <i class="fas fa-building me-1"></i> 合约地址:
                            </div>
                            <p class="text-break mb-0">{{ transactionInfo.to }}</p>
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">关闭</button>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
    <!-- Vue 应用 -->
    <script src="js/app.js"></script>
</body>
</html> 